<template>
  <div class="flex direction-column fixed-page visual-page">
    <div class="search-form flex align-center">
      <el-tooltip content="返回">
        <el-button
          type="primary" icon="el-icon-arrow-left" circle style="margin-bottom: 18px;margin-right: 10px;"
          @click="$router.go(-1)"
        ></el-button>
      </el-tooltip>
      <el-form inline>
        <el-form-item label="统计周期">
          <chart-params clearable v-model="type"></chart-params>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid-content" v-loading="loading">
      <grid-item-one title="全市用煤量监测" :data="data1"></grid-item-one>
      <grid-item-two title="全市用电量监测" :data="data2"></grid-item-two>
      <bar-chart title="重点行业用煤排名" unit="万吨"></bar-chart>
      <pie-chart title="区域用煤占比"></pie-chart>
      <bar-chart title="重点行业用电排名" unit="亿千瓦时"></bar-chart>
      <pie-chart title="区域用电占比"></pie-chart>
    </div>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import BarChart from './bar-chart'
import PieChart from './pie-chart'
import ChartParams from '@/components/chart-params'
import { coalConsumptionMonitoring, powerConsumptionMonitoring } from '@/api/statistics'

const api = {
  coalConsumptionMonitoring,
  powerConsumptionMonitoring
}
export default {
  name: 'coal-electric',
  components: {
    GridItemOne,
    GridItemTwo,
    BarChart,
    PieChart,
    ChartParams,
  },
  data () {
    return {
      loading: false,
      type: '4',
      data1: [],
      data2: [],
    }
  },
  mounted () {
    this.getAllData()
  },
  methods: {
    clickSearch () {
      this.getAllData()
    },
    getAllData () {
      this.loading = true
      return Promise.all([this.getData1(), this.getData2()]).finally(() => {
        this.loading = false
      })
    },
    getData1 () {
      return api.coalConsumptionMonitoring(this.type).then(res => {
        if (res.code === 200) {
          this.data1 = res.data
        }
      })
    },
    getData2 () {
      return api.powerConsumptionMonitoring(this.type).then(res => {
        if (res.code === 200) {
          this.data2 = res.data
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: $gutter;

    .content-block {
      background: transparent;
      border-radius: 4px;
    }
    .block-2,
    .block-1 {
      grid-column-start: 1;
      grid-column-end: 5
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
